<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽没高：设置高宽 */
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 盒/框模型 ：页面任何元素存在于盒模型中
				       组成 ：外边距+边框+内边距+内容  
					 外边距 ： margin属性 与 border属性方向用法一致 
					   语法： 属性值1个，代表4个方向，顺时针: 上 右 下 左 
						     属性值2个，代表4个方向，顺时针: 上下  右左
							                   自适应居中:  0   auto       
							 属性值3个，代表4个方向，顺时针: 上  右左 下
					 外边距-方向属性：
					margin-left：数值px；
				    margin-right：数值px； 
					margin-top：数值px；
					margin-bottom：数值px；
					   */
			   margin: 100px; /*上 右 下 左*/	
			   margin: 10px 100px; /*上下  右左*/
			   margin: 10px 20px 100px; /* 上  右左 下*/
			   margin: 10px 20px 30px 100px; /*上 右 下 左 */
			   /* 自适应居中 */
			   margin: 0 auto;
			   /*元素向下移动100个像素*/
			   margin-top: 100px;
			   /*内边距：padding属性与margin属性使用方法类似
			      特点：边框与内容之间距离，撑开适用于精灵图
				  语法： 属性值1个，代表4个方向，顺时针: 上 右 下 左
				  		属性值2个，代表4个方向，顺时针: 上下  右左
				  		属性值3个，代表4个方向，顺时针: 上  右左 下
						属性值4个，代表4个方向，顺时针: 上 右 下 左
				  内边距-方向与外边距-方向使用方法一致		
			   */
			   padding: 50px;
			   padding: 50px 100px; /*使用率：精灵图*/
			   padding: 50px 100px 200px;
			   padding: 50px 100px 200px 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>